<style>
  /*Furo*/
  .content {
    flex: 1;
  }
  .article-container {
    flex: 1;
  }
  #furo-main-content {
    height: 100%;
    width: 100%;
  }
  .sidebar-drawer {
    position: absolute;
    visibility: hidden;
  }
  .toc-drawer {
    position: absolute;
    visibility: hidden;
  }
  .mobile-header {
    position: absolute;
    visibility: hidden;
  }
</style>

<style>
  /*Content*/
  .outermost {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .preview-frame {
    border-radius: 12px;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.4);
    width: round(80svw, 1px);
    max-width: 600px;
    height: round(60svh, 1px);
    max-height: 600px;
    border: 1px solid rgba(122, 122, 122, 0.5);
    border-width: 30px 1px 1px 1px;
  }
  .project-title {
    margin: 0em;
    font-size: 2.4em;
    font-weight: 200;
    text-shadow: 0px 0px 16px black, 0px 0px 16px black, 0px 0px 16px black,
      0px 0px 16px black, 0px 0px 16px black, 0px 0px 16px black;
  }
  .project-info {
    text-shadow: 0px 0px 16px black, 0px 0px 16px black, 0px 0px 16px black,
      0px 0px 16px black;
  }
  .spacing {
    height: 12px;
  }
  .stack-layers {
    position: relative;
  }
  .text-overlay {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    color: white;
  }
</style>

<div class="outermost">
  <div class="stack-layers"></div>
  <div style="position: relative">
    <iframe src="/_static/web_app/" class="preview-frame"></iframe>
    <div class="text-overlay">
      <div class="spacing"></div>
      <p class="project-title">Rinf</p>
      <p class="project-info"><strong>RUST IN FLUTTER</strong></p>
    </div>
  </div>
</div>
